<template>
    <view>
        <u-tabs :list="list" active-color="#ff9900" :is-scroll="false" v-model="current" @change="changeTabs"></u-tabs>
        <view class="card-box">
            <view class="card-item" v-for="(cardItem, index) in cardData" :key="index">
                <view class="vanBox">
                    <van-row class="vantCol" justify="center" v-for="(item, index) in cardItem.cardTitle" :key="index">
                        <van-col class="vantColTitle" span="8">{{ item.name }}:</van-col>
                        <van-col class="vantColTitle2" span="14"
                            :class="{ 'red-text': item.name === '排队金额' || item.name === '当前排名' }">{{
                                item.value }}</van-col>
                        <van-col span="2"></van-col>
                        <!-- <van-col  class="vantColTitle3" span="6">span: 6</van-col> -->
                    </van-row>
                </view>
                <view style="padding: 20rpx;font-weight: 700;">{{ (cardItem.status == 20 || cardItem.status == 21) ?
                    '已完成'
                    : cardItem.status == 10 ? '审批中' :  cardItem.status == 0 ? '排队中' : ''  }}</view>
            </view>

        </view>
        <u-back-top :scroll-top="scrollTop"></u-back-top>
    </view>
</template>

<script setup lang="ts">
import { onLoad, onShow, onPageScroll} from '@dcloudio/uni-app'
import { ref } from 'vue'
//api
import moneyApi from '@/api/modules/money';
import { useUserStore, useConfigStore } from '@/store'
//工具
import { dateFormat } from '@/utils/index'


// 初始化数据
const userStore = useUserStore()
const current = ref(0)
const list = ref([{ name: '历史' }, { name: '排队中-最近' }, { name: '排队中' }, { name: '已完成' }])
const cardTitle = ref<any>()
const cardData = ref<any>([])
    const scrollTop = ref(0)
//加载数据
onLoad((option) => {
    queueList()
    if (option?.id) {
        current.value = option.id
    }
})
onPageScroll((e) => {
    scrollTop.value = e.scrollTop
})
// 排队列表
const queueList = async (status?: any, sortJson?: any) => {
    const { data, code } = await moneyApi.queueList({
        noPaging: true,
        detail: true,
        userId: userStore.userInfo?.id,
        status: status,
        sortJson: sortJson
    })
    if (code == 200) {
        if (data.length > 0) {
            cardData.value = data
            cardData.value.forEach((item: any) => {
                // console.log(item.originalMoney, '测试', new Date(item.createTime));
                item.cardTitle = [
                    { name: '消费门店', value: item.shop.name },
                    { name: '排队门店', value: item.fromShop.name },
                    { name: '用户电话', value: item.user.phone },
                    { name: '用户昵称', value: item.user.nickname },
                    { name: '流水号', value: item.serialNo },
                    { name: '排队金额', value: `￥${parseFloat(item.originalMoney).toFixed(5)}` },
                    { name: '当前排名', value: item.queueLevel },
                    { name: '消费时间', value: dateFormat(new Date(item.createTime * 1000), 'yyyy-MM-dd hh:mm:ss') }
                ]
            })


        } else {
            cardData.value.forEach((item: any) => {
                item.cardTitle = []
            })
        }

    }
}
// 切换tabs
const changeTabs = (index: any) => {
    current.value = index
    switch (index) {
        case 0:
            queueList()
            break;
        case 1:
            let sortJson = "[{\"column\":\"id\",\"direction\":\"DESC\"}]"
            queueList(0, sortJson)
            break;
        case 2:
            queueList(0)
            break;
        case 3:
            queueList(20)
            break;
        default:
            break;
    }

}



</script>

<style lang="scss" scoped>
.card-box {
    padding: 30rpx;
}

.card-item {
    display: flex;
    justify-content: space-between;
    margin: 20rpx 0;
    // padding: 30rpx;
    border-radius: 20rpx;
    background-color: #fff;

    .vanBox {
        flex: 1;
        // background-color: pink;
    }

    .vantCol {
        margin: 20rpx;
    }

    .vantColTitle {
        color: #000;
        font-weight: 700;
        font-size: 28rpx;
    }

    .vantColTitle2 {
        color: #9c9c9c;
    }

    .red-text {
        color: red;
    }
}
</style>